<template>
  <teleport to="#full">
    <div
      class="full-screen"
      :style="{ 'background-image': `url(${pic.wallpaperImg[2].uri})` }"
    >
      <ul class="pic-tools">
        <li
          class="iconfont"
          :class="{ love: pic.hasCollect == 1 }"
          @click="setLove()"
        >
          &#xe608;
        </li>
        <li class="iconfont">&#xe600;</li>
        <li class="iconfont" @click="close">&#xe671;</li>
      </ul>
    </div>
  </teleport>
</template>

<script>
import { defineComponent, onUnmounted } from "vue";
import { useStore } from "vuex";
import axios from 'axios'

export default defineComponent({
  props: {
    index: {
      type: Number,
      default: 1,
    },
  },
  emits: ["close"],
  setup(props) {
    const store = useStore();
    const pic = store.state.columns.wallpapers[props.index];
    const setLove=()=>{
        axios.get(`/apis/wallpapercontent/wallpaper/report/opt?type=1&wallpaperId=${pic.wallpaperId}`).then(data=>{
        store.commit('setLove',props.index)
        }).catch(e=>{
        
        })
    }
    const node = document.createElement("div");
    node.id = "full";
    document.body.appendChild(node);

    //打开全屏方法
    const openFullscreen=(element)=> {
      console.log(element)
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullScreen();
        }
    }
    openFullscreen(node)
    onUnmounted(() => {
      document.body.removeChild(node);
    });
    return {
      pic,
      setLove
    };
  },
  methods: {
    close() {
      this.exitFullScreen()
      this.$emit("close");
    },
     //退出全屏方法
     exitFullScreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExiFullscreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();

        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }

  },
});
</script>

<style lang="stylus" scoped>
.full-screen {
  z-index: 100;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  .pic-tools {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    height: 50px;
    width: 100%;
    padding: 0;
    list-style: none;
    transition: all 0.3s;
    line-height: 50px;
    padding: 0 10px;
    font-size: 14px;

    .love {
      color: rgb(254, 107, 122);
    }

    li {
      cursor: pointer;
      color: #fff;
      height: 40px;
      width: 40px;
      font-size: 13px;
      border-radius: 50%;
      margin: 10px 10px;
      text-align: center;
      line-height: 40px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: all 0.2s;

      &:hover {
        background-color: rgba(0, 0, 0, 0.8);
      }
    }
  }
}
</style>
